import React, { useState } from 'react'

interface Props {
    userName: string;
    onNameUpdated: (newName: string) => void;
    // 声明onChange事件函数 泛型为input change事件
}
const NameEditComponent: React.FC<Props> = (props) => {
    const [editingName, setEditingName] = useState(props.userName)
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // onNameUpdated
        setEditingName(e.target.value)
    }
    const onNameSubmit = (e) => {
        props.onNameUpdated(editingName)
    }
    return (    
        <>
            {/* vscode 用ts写出来的 */}
            {props.userName}
            <input value={editingName} onChange={onChange} />
            <button onClick={onNameSubmit}>change</button>
        </>
    )
}
export default NameEditComponent